

<html><head><title>CSS Styles - Natural Docs</title><link rel=stylesheet type="text/css" href="styles.css"><style type="text/css"><!--


        .StyleTable {
            margin: 1em 5ex 0 5ex }

        .StyleTable td {
            padding-bottom: .5em}

        .StyleName {
            font: bold 12pt Georgia, serif;
            }

        .StyleView,
        .StyleDownload
            {
            padding-left: 3ex;
            }

        .StyleDescription {
            width: 100%;
            padding-left: 3ex }

        .StyleView,
        .StyleDownload,
        .StyleDescription {
            padding-top: 1px;
            }
        .IE .StyleView,
        .IE .StyleDownload,
        .IE .StyleDescription {
            padding-top: 0;
            }

    
--></style><script language=JavaScript src="javascript/PNGHandling.js"></script><script language=JavaScript src="javascript/BrowserStyles.js"></script></head><body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0><script language=JavaScript><!--
OpeningBrowserTags();// --></script>

<!-- saved from url=(0026)http://www.naturaldocs.org -->

<table width=100% border=0 cellspacing=0 cellpadding=0 class=PageTable float=center><tr><td colspan=3 class=Header><table width=100% border=0 cellspacing=0 cellpadding=0><tr><td><img src="images/header/leftside.png" width=30 height=75><a href="index.html"><img src="images/header/logo.png" width=524 height=75 alt="Natural Docs"></a></td><td align=right><img src="images/header/rightside.png" width=30 height=75></td></tr></table></td></tr><tr><td><img src="images/header/overleftmargin.png" width=10 height=6></td><td class=SideMenuTop><img src="images/header/overmenu.png" width=14 height=6></td><td class=BodyTop><img src="images/header/overbody.png" width=24 height=6></td></tr><tr><td></td><td class=SideMenu nowrap><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/about.png" width=52 height=13 alt="About"></div><div class=SideMenuBody><a href="languages.html" class=SideMenuEntry>Language Support</a><a href="output.html" class=SideMenuEntry>Output Formats</a></div></div><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/using.png" width=45 height=13 alt="Using"></div><div class=SideMenuBody><a href="documenting.html" class=SideMenuEntry>Documenting<br>Your Code</a><a href="keywords.html" class=SideMenuEntry>Keywords</a><a href="running.html" class=SideMenuEntry>Running</a><a href="troubleshooting.html" class=SideMenuEntry>Troubleshooting</a></div></div><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/customizing.png" width=96 height=13 alt="Customizing"></div><div class=SideMenuBody><a href="menu.html" class=SideMenuEntry>Organizing the Menu</a><span class=SideMenuEntry id=SelectedSideMenuEntry>CSS Styles</span><a href="customizingtopics.html" class=SideMenuEntry>Topics and Keywords</a><a href="customizinglanguages.html" class=SideMenuEntry>Languages, Indexes,<br>and Prototypes</a></div></div><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/community.png" width=86 height=13 alt="Community"></div><div class=SideMenuBody><a href="http://www.naturaldocs.org/" class=SideMenuEntry>Web Site</a><a href="http://www.naturaldocs.org/mailinglist.html" class=SideMenuEntry>Mailing Lists</a><a href="http://www.naturaldocs.org/messageboards.html" class=SideMenuEntry>Message Boards</a><a href="http://www.naturaldocs.org/bugs.html" class=SideMenuEntry>Bugs and<br>Feature Requests</a></div></div></td><td class=Body width=100%><div class=PageTitle>CSS Styles</div><div class=TOC><a href="#DefaultStyles">Default Styles</a> &middot; <a href="#Customizing">Customizing</a> &middot; <a href="#CommonCustomizations">Common Customizations</a></div><div class=Topic><a name="DefaultStyles"></a><div class=TopicTitle>Default Styles</div><p>These are the styles that come with Natural Docs.&nbsp; They all follow the same color scheme and general layout; the choices are more so that you can choose the style of text you want.</p><p>You choose which style you want for your project by adding &ldquo;<code>-s <i>[style name]</i></code>&rdquo; to the command line.</p><table width=100% border=0 cellspacing=0 cellpadding=0 class=StyleTable><tr><td class=StyleName>Default</td><td class=StyleDescription>This is the default style that Natural Docs uses.&nbsp; Most of the text is 10pt Verdana.</td></tr><tr><td class=StyleName>Small</td><td class=StyleDescription>Smaller fonts than Default with most of the text using 8pt Verdana.&nbsp; Some people like the small fonts because you can fit more on the screen at once.&nbsp; However, some people hate them and find them hard to read.</td></tr><tr><td class=StyleName>Roman</td><td class=StyleDescription>Serif fonts with most of the text using 12pt Roman.&nbsp; Some people prefer Roman fonts, usually those that have decent anti-aliasing displays like Mac OS X or Windows XP with ClearType.</td></tr></table></div><div class=Topic><a name="Customizing"></a><div class=TopicTitle>Customizing</div><p>There are two ways to customize the CSS files.&nbsp; One is to build your own file from scratch, and the other is to make a touch-up file that gets applied after one of the default styles.&nbsp; Either way you want to create your own CSS file in your project directory (the one you use with <code>-p</code>) or if you plan on sharing it between many projects, in Natural Docs&rsquo; Styles directory.</p><p>To use a custom file, no matter where you put it, you just use it with <code>-s</code> without the CSS extension.&nbsp; So if you made Red.css, you use &ldquo;<code>-s Red</code>&rdquo;.&nbsp; If you made a touch-up file instead, you use it after one of the default styles, such as with &ldquo;<code>-s Default Red</code>&rdquo;.&nbsp; If you&rsquo;re so inclined, you can string as many touch-up files together as you want or use one of your own as a base.</p><p>The <a href="http://www.naturaldocs.org/documentation/html/files/Info/CSSGuide-txt.html">CSS Guide</a> documents the page structure and CSS styles of Natural Docs&rsquo; output.&nbsp; Always remember to check its <a href="http://www.naturaldocs.org/documentation/html/files/Info/CSSGuide-txt.html#Revisions">revisions section</a> every time you upgrade Natural Docs because it may change between releases.</p></div><div class=Topic><a name="CommonCustomizations"></a><div class=TopicTitle>Common Customizations</div><a name="WebStyleParagraphs"></a><div class="SubTopic First">Web-Style Paragraphs</div><p>Natural Docs defaults to print-style paragraphs like the one you are reading.&nbsp; Each one is indented and there are no blank lines between them.&nbsp; To switch to web-style paragraphs, which have blank lines and no indents, add this to your custom CSS file:</p><pre class=Example>p {
   text-indent: 0;
   margin-bottom: 1em;
   }
</pre><a name="PrototypeColors"></a><div class="SubTopic">Prototype Colors</div><p>If you&rsquo;ve <a href="customizingtopics.html#AddingTopicTypes">added a custom topic type</a> and have it <a href="customizinglanguages.html#Prototypes">finding prototypes for you</a>, you may want to have them appear in a different color than the default black and white.&nbsp; Add this to your custom CSS file:</p><pre class=Example>.C<i>[type]</i> .Prototype {
   background-color: <i>[color]</i>;
   border-color: <i>[color]</i>;
   }
</pre><p>Replace <code><i>[type]</i></code> with the name of your topic type, minus any symbols and spaces.&nbsp; So if you added a type &ldquo;Sound Effect&rdquo;, you would apply the style to &ldquo;<code>.CSoundEffect .Prototype</code>&rdquo;.</p></div></td></tr><tr><td></td><td class=SideMenuBottom><table width=100% border=0 cellspacing=0 cellpadding=0><tr><td class=SideMenuBottomLeft><img src="images/menu/bottomleft.png" width=18 height=19></td><td class=SideMenuBottomRight><img src="images/menu/bottomright.png" width=18 height=19></td></tr></table></td><td class=BodyBottom>Copyright &copy; 2003-2010 Greg Valure</td></tr></table><script language=JavaScript><!--
ClosingBrowserTags();// --></script></body></html>